import React from 'react'
import { SearchPanel } from "./search-panel"
import { List } from "./list"
import { useState } from "react"
import { useDebounce, useDocumentTitle } from 'utils'
import styled from '@emotion/styled'
import { Typography } from 'antd'
import { useProjects } from 'utils/project'
import { useUsers } from 'utils/user'
import { useUrlQueryParam } from 'utils/url'

export const ProjectListPage = () => {
  const [ ,setParam] = useState({
    name: '',
    personId: ''
  })
  const [param] = useUrlQueryParam(['name', 'personId'])
  const debounceParam = useDebounce(param, 200)
  const {isLoading, error, data: list} = useProjects(debounceParam)
  const {data:users} = useUsers()
  useDocumentTitle('项目列表', false)
  return (
    <Container>
      <h1>项目列表</h1>
      <SearchPanel users={users || []} param={param} setParam={setParam}></SearchPanel>
      {/* Typography.Text antd自带异常提示 */}
      {error ? <Typography.Text type={'danger'}>{error.message}</Typography.Text> : null }
      <List loading={isLoading} dataSource={list || []} users={users || []}></List>
    </Container>
  )
}

ProjectListPage.whyDidYouRender = true
// 得到不停渲染的原因是：由于js中比较的往往是地址而不是值，可能一个统一变量在渲染后值相同，但是地址变化，所以对比之后任然不一样
// class写法
// class Test extends React.Component<any, any> {
//   static whyDidYouRender = true
// }

const Container = styled.div`
  padding: 3.2rem;
`